<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <%@include file="/WEB-INF/jsp/common.jsp"%>
    <link rel="stylesheet" href="${path}/css/metroStyle/metroStyle.css?_=<%=new Date().getTime()%>">
    <script src="${path}/js/jquery.ztree.all.min.js"></script>
</head>
<body>
<h2>角色管理</h2>
<hr>

<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-md8">
            <table id="roleTable" lay-filter="roleTable"></table>
        </div>
        <div class="layui-col-md4" style="padding:10px;">
            <ul id="treeDemo" class="ztree"></ul>
            <button class="layui-btn layui-btn-success layui-btn-fluid" onclick="assignPers();">授权</button>
        </div>
    </div>
</div>


<script>

    var roleId;
    //给角色授权
    function assignPers() {
        //获取选中的节点
        var nodes = zTreeObj.getCheckedNodes(true);

        var str = "";
        $.each(nodes,function () {
            str += this.id + ",";
        });
        str = str.substring(0,str.length - 1);

        $.post('${path}/sysRole/assignPers',{
            roleId : roleId,
            perIds : str
        },function () {
            layer.msg('授权成功',{icon:3});
        });
    }

    var zTreeObj;
    // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
    var setting = {
        check: {
            enable: true
        },
        data: {
            key: {
                name: "text"
            }
        }
    };

    //加载属性菜单的数据，渲染显示
    $.get('${path}/sysPermission/parentPers',function (zNodes) {
        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });

    layui.use(['table'],function () {
        var table = layui.table;
        var treeGrid = layui.treeGrid;

        //渲染表格
        table.render({
            elem : '#roleTable',
            url : '${path}/sysRole/list',
            page : true,
            even : true,
            cols : [[
                {type:'radio'},
                {field:'id', title:'编号'},
                {field:'name', title:'角色名称'},
                {field:'available', title:'是否可用'}
            ]]
        })

        //监听单选按钮选中事件
        table.on('radio(roleTable)',function (obj) {
            roleId = obj.data.id;
            $.get("${path}/sysRole/rolePers",{roleId:obj.data.id},function (data) {
                //让属性菜单选中对应的节点
                //获取所有的树形菜单节点
                var nodes = zTreeObj.transformToArray(zTreeObj.getNodes());
                $.each(nodes,function () {
                    //判断当前节点的id值是否在  角色对应的权限列表中
                    if($.inArray(this.id,data) != -1){
                        zTreeObj.checkNode(this,true,true);
                    }else{
                        zTreeObj.checkNode(this,false,true);
                    }
                });
            });
        });
    })
</script>
</body>
</html>
